<!DOCTYPE html>
<html xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">
    <h:head>
        <title>网络报销系统</title>
        <style type="text/css">
            @font-face{
                fong-family:Raleway;
                src:url(raleway_thin.eot);
                srclocal(raleway_thin),url(raleway_thin.ttf) format(opentype);
            }
            *{font-family: tahoma, arial,Verdana,宋体, sans-serif;}
            html {
                height:100%;
                background-color:#6D93D4;
                background-image:-moz-linear-gradient(top,#6D93D4,#fff);
                background-image:-webkit-gradient(linear,left top,left bottom,from(#6D93D4),to(#fff));
                filter: progid:DXImageTransform.Microsoft.gradient(StartColorStr='#6D93D4',EndColorStr='#FFFFFF',gradientType='0');
                background-image:linear-gradient(top,#6D93D4,#fff);
            }
            h1 {
                float:center;
                margin-top:0;
                font-family:Raleway,Georgia,Times,Times New Roman,serif;
            }
            input[type="text"]{
                width:117px;
                padding: 3px 5px 3px 5px;
            }
            input[type="password"]{
                width:117px;
                padding: 3px 5px 3px 5px;
            }
            select{
                margin: 3px;
                font-size: 13px !important;
            }
            body{
                /*                        background-image: url(images/loginbk.jpg);*/
                background-repeat: no-repeat;
                background-position: center center;
                text-align: center;
                margin-top: 150px;
            }
            #login{
                flow:center;
                margin: auto;
/*                margin-left: auto;
                margin-right: auto;
                margin-top: auto;*/
                vertical-align: middle;
                height:200px;
                line-height:300px;
            }
            #logingrid{
                flow:center;
            }
            .col1{
                text-align: right;
            }
            .col2{
                text-align: left;
            }
            .col{
                border: 1px;
            }
            .footer{
                position: absolute;
                left: 0;
                right: 0;                
                bottom: 20px;
                height:40px;       
                clear:both;
            }
        </style>
    </h:head>
    <h:body>
        <h:form>
            <div class="login">
                <h1>全国社保基金理事会网络报销系统</h1>
                <br/>
                <br/>
                <center>
                <h:panelGrid id="loginGrid" columns="2" columnClasses="col1,col2">
                    <h:outputLabel value="年度：" />
                    <h:selectOneMenu value="#{loginBean.iyear}"
                                     style="width: 130px;margin-left: 1px;"
                                     required="true">
                        <f:selectItem itemLabel="-请选择-" itemValue=""/>
                        <f:selectItem itemLabel="2013年" itemValue="2013"/>
                        <a4j:ajax execute="@this" listener="#{loginBean.yearChange}" event="change" render="@this"/>
                    </h:selectOneMenu>

                    <h:outputLabel value="部门："/>
                    <h:panelGroup id="deptGroup">
                        <a4j:commandLink onclick="#{rich:component('deptPanel')}.show();"
                                         execute="@this" render="@this,deptTree">
                            <h:inputText id="deptName" value="#{loginBean.dept.name}" readonly="true"/>
                        </a4j:commandLink>
                    </h:panelGroup>

                    <h:outputLabel value="操作员：" />
                    <h:selectOneMenu id="perName" value="#{loginBean.per.cpsn_number}"
                                     style="width: 130px;margin-left: 1px;">
                        <f:selectItem itemValue="" itemLabel="-请选择-"/>
                        <f:selectItems value="#{loginBean.perli}" />
                        <a4j:ajax event="change" execute="@this" render="@this"/>
                    </h:selectOneMenu>

                    <h:outputLabel value="密码：" />
                    <h:panelGroup>
                        <h:inputSecret value="#{loginBean.per.pwd}" required="true">
                            <a4j:ajax event="blur" execute="@this"/>
                        </h:inputSecret>
                        <rich:messages globalOnly="true"/>
                    </h:panelGroup>
                    <h:outputLabel value="日期：" rendered="false"/>
                    <h:panelGroup rendered="false">
                        <rich:calendar value="#{loginBean.loginDate}"
                                       locale="zh_CN"
                                       popup="true"
                                       datePattern="yyyy-MM-dd"
                                       showApplyButton="false"
                                       style="width:200px"/>
                    </h:panelGroup>
                    <h:outputText/>
                    <h:panelGroup>
                        <h:commandButton value="登陆"
                                         action="#{loginBean.login}"
                                         style="margin-left:30px;padding: 3px 5px 3px 5px;">
                        </h:commandButton>
                        <a href="./tools/IE8.exe" style="font-size: 18px;color: blueviolet;font-weight: bolder;">IE8</a>
                        <h:commandLink action="/handBook_1.jsf?faces-redirect=true" value="操作说明" immediate="true"/>
                    </h:panelGroup>
                </h:panelGrid>
               </center>
            </div>
            <div class="footer">
                <hr/>
                技术支持：北京云狐软件有限公司      电话：010-68019239,13801329954
            </div>
        </h:form>

        <rich:popupPanel id="deptPanel" header="部门" autosized="true">
            <f:facet name="controls">
                <h:outputLink value="#">关闭
                    <rich:componentControl target="deptPanel" operation="hide" event="click"/>
                </h:outputLink>
            </f:facet>
            <rich:panel>
                <h:form>
                    <h:panelGroup id="deptTree">
                        <div style="width:320px;height:300px;overflow:auto;-moz-user-select:none;"
                             unselectable="on" onselectstart="return false;">
                            <rich:tree value="#{loginBean.deptTree}" var="item"
                                       selectionType="ajax" toggleType="client"
                                       selectionChangeListener="#{loginBean.deptChange}"
                                       style="height:400px;width:300px;text-align: left"
                                       render="deptName,perName"
                                       execute="@this">
                                <rich:treeNode ondblclick="#{rich:component('deptPanel')}.hide();">
                                    <h:outputText value="[#{item.data.code}]#{item.data.name}"/>
                                </rich:treeNode>
                            </rich:tree>
                        </div>
                    </h:panelGroup>
                    <a4j:commandButton value="确定" execute="@this">
                        <rich:componentControl target="deptPanel" operation="hide" event="click"/>
                    </a4j:commandButton>
                </h:form>
            </rich:panel>
        </rich:popupPanel>
    </h:body>
</html>
